<template>
    <el-card>
        <el-button @click="back">返回</el-button>
        <el-tree :data="menuTreeList"
                 show-checkbox
                 default-expand-all
                :props="defaultProps"
                 node-key="Id"
                 ref="tree"
        ></el-tree>
        <div style="margin-top: 20px" align="center">
            <el-button type="primary" @click="handleSave()">保存</el-button>
            <el-button @click="handleClear()">清空</el-button>
        </div>
    </el-card>
</template>

<script>
import {getMenuTree, getRoleMenu, updateRoleMenu} from "../../../api/menu";

export default {
    name: "allocMenu",
    data(){
        return{
            menuTreeList:[],
            defaultProps:{
                children: 'ChildrenMenuList',
                label: 'Name'
            }

        }
    },
    methods:{
      getMenuTree(){
          getMenuTree().then(res=>{
              this.menuTreeList=res.Result
          })
      },
    getRoleMenu(){
          let para={id:this.$route.query.id}
            getRoleMenu(para).then(res=>{
                let menuList=res.Result
                let checkedMenuIds=[];
                if(menuList!=null&&menuList.length>0){
                    for(let i=0;i<menuList.length;i++){
                        let menu = menuList[i]
                        if(menu.ParentId!==0){
                            checkedMenuIds.push(menu.Id)
                        }
                        if(menu.ParentId==0&&menu.ChildrenMenuList.length==0){
                            checkedMenuIds.push(menu.Id)
                        }
                    }
                    this.$refs.tree.setCheckedKeys(checkedMenuIds)
                }
            })
    },
        handleSave(){
            let checkedNodes = this.$refs.tree.getCheckedNodes();
            let checkedMenuIds=new Set();
            if(checkedNodes!=null&&checkedNodes.length>0){
                for(let i=0;i<checkedNodes.length;i++){
                    let checkedNode = checkedNodes[i];
                    checkedMenuIds.add(checkedNode.Id);
                    if(checkedNode.ParentId!==0){
                        checkedMenuIds.add(checkedNode.ParentId);
                    }
                }
            }

            let para={
                roleId:this.$route.query.id,
                mIdStr:Array.from(checkedMenuIds).toString()
            }
            console.log(para)
            this.$confirm('是否分配菜单？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                console.log(checkedMenuIds)
                updateRoleMenu(para).then(res=>{
                    this.$message({
                        message: '分配成功',
                        type: 'success',
                        duration: 1000
                    });
                    this.$router.back();
                })
            })


        },
        handleClear(){
            this.$refs.tree.setCheckedKeys([]);
        },
        back(){
          this.$router.push({path:'/RoleSetting'})
        }
    },
    created() {
        this.getMenuTree()
        this.getRoleMenu()
    }
}
</script>

<style scoped>

</style>